<template>
  <div class="main">
    <el-tabs v-model="activeName" class="demo-tabs" type="border-card">
      <el-tab-pane label="数据表" name="first">
        <PureTableBar title="数据表列表" :columns="columns" @refresh="dbList">
          <template v-slot="{ size, dynamicColumns, height }">
            <div
              v-if="selectedNum > 0"
              v-motion-fade
              class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
            >
              <div class="flex-auto">
                <span
                  style="font-size: var(--el-font-size-base)"
                  class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
                >
                  已选 {{ selectedNum }} 项
                </span>
                <el-button type="primary" text @click="onSelectionCancel">
                  取消选择
                </el-button>
                <el-button
                  v-auth="'backup'"
                  type="primary"
                  :icon="useRenderIcon(Files)"
                  @click="operation(setDbBackup, '备份')"
                  >备份</el-button
                >
                <el-button
                  v-auth="'optimize'"
                  type="primary"
                  :icon="useRenderIcon(MagicStick)"
                  @click="operation(setDbOptimize, '优化')"
                  >优化</el-button
                >
                <el-button
                  v-auth="'repair'"
                  type="primary"
                  :icon="useRenderIcon(FirstAidKitFill)"
                  @click="operation(setDbRepair, '修复')"
                  >修复</el-button
                >
              </div>
            </div>
            <pure-table
              ref="tableRef"
              row-key="id"
              align-whole="center"
              adaptive
              showOverflowTooltip
              :adaptiveConfig="adaptiveConfig"
              table-layout="auto"
              default-expand-all
              :loading="loading"
              :size="size"
              :height="height"
              :data="dataList"
              :columns="dynamicColumns"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
              @selection-change="handleSelectionChange"
            >
              <template #operation="{ row }">
                <el-button link type="primary" @click="getTableInfo(row)">
                  详情
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
        <el-drawer
          v-model="infoDrawer"
          direction="rtl"
          :title="infoTitle"
          size="50%"
        >
          <pure-table
            align-whole="center"
            table-layout="auto"
            default-expand-all
            showOverflowTooltip
            :data="tableInfo"
            :columns="infoColumns"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            size="small"
          />
        </el-drawer>
      </el-tab-pane>
      <el-tab-pane label="备份" name="second">
        <PureTableBar
          title="备份列表"
          :columns="fileColumns"
          @refresh="backupList"
        >
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              align-whole="center"
              table-layout="auto"
              default-expand-all
              showOverflowTooltip
              :data="fileList"
              :columns="dynamicColumns"
              :size="size"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
            >
              <template #operation="{ row }">
                <el-button
                  link
                  type="primary"
                  v-auth="'download'"
                  @click="handleFileDownload(row)"
                >
                  下载
                </el-button>
                <el-button
                  link
                  type="primary"
                  v-auth="'import'"
                  @click="handleFileImport(row)"
                >
                  导入
                </el-button>
                <el-popconfirm
                  width="230"
                  :title="`是否确认删除名称为 ${row.name} 的备份文件？`"
                  @confirm="handleFileDel(row)"
                >
                  <template #reference>
                    <el-button link type="primary" v-auth="'del'">
                      删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useUser } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import MagicStick from "@iconify-icons/ep/magic-stick";
import Files from "@iconify-icons/ep/files";
import FirstAidKitFill from "@iconify-icons/ri/first-aid-kit-fill";

defineOptions({
  name: "Database"
});

const tableRef = ref();
const activeName = ref("first");
const adaptiveConfig = reactive({ offsetBottom: 45 });

const {
  loading,
  columns,
  dataList,
  operation,
  selectedNum,
  onSelectionCancel,
  handleSelectionChange,
  setDbBackup,
  setDbOptimize,
  setDbRepair,
  getTableInfo,
  tableInfo,
  infoColumns,
  infoDrawer,
  infoTitle,
  fileColumns,
  fileList,
  handleFileDel,
  handleFileDownload,
  backupList,
  dbList,
  handleFileImport
} = useUser(tableRef);
</script>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-button:focus-visible) {
  outline: none;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}

:deep(.el-drawer__header) {
  margin-bottom: 0px;
  color: #292727;
}
:deep(.el-drawer__title) {
  font-size: 2rem;
}
</style>
